
<script setup>
import { ref, onMounted } from 'vue';

import {
  mxCellRenderer,
  mxEvent,
  mxGraph,
  mxCellOverlay,
  mxImage,
  mxHierarchicalLayout,
  mxEdgeHandler,
  mxMorphing,
} from './../../graph/index';
import { mxClient } from './../../graph/mxClient';
import { mxRubberband } from '../../graph/handler/mxRubberband';
import { mxEventObject } from '../../graph/util/mxEventObject';
import { mxConstants } from '../../graph/util/mxConstants';
import addPng from './../assets/images/add.png';
import { mxUtils } from '../../graph/util/mxUtils';
import { mxPoint } from '../../graph/util/mxPoint';
import { mxCylinder } from '../../graph/shape/mxCylinder';
import { mxClipboard } from '../../graph/util/mxClipboard';
import { mxCodec } from '../../graph/io/mxCodec';
import { mxGraphModel } from '../../graph/model/mxGraphModel';

onMounted(() => {
  const container = document.getElementById('graphContainer');
  main(container);
});

function main() {
  var divs = document.querySelector('.mxgraph');

  for (let i = 0; i < divs.length; i++) {
    let container = divs[id];

    var xml = mxUtils.getTextContent(container);
    var xmlDocument = mxUtils.parseXml(xml);

    if (
      xmlDocument.documentElement != null &&
      xmlDocument.documentElement.nodeName == 'mxGraphModel'
    ) {
      var decoder = new mxCodec(xmlDocument);
      var node = xmlDocument.documentElement;

      container.innerHTML = '';

      var graph = new mxGraph(container);
      graph.centerZoom = false;
      graph.setTooltips(false);
      graph.setEnabled(false);

      // Changes the default style for edges "in-place"
      var style = graph.getStylesheet().getDefaultEdgeStyle();
      style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;

      // Enables panning with left mouse button
      graph.panningHandler.useLeftButtonForPanning = true;
      graph.panningHandler.ignoreCell = true;
      graph.container.style.cursor = 'move';
      graph.setPanning(true);

      if (divs[i].style.width == '' && divs[i].style.height == '') {
        graph.resizeContainer = true;
      } else {
        // Adds border for fixed size boxes
        graph.border = 20;
      }

      decoder.decode(node, graph.getModel());
      graph.resizeContainer = false;

      // Adds zoom buttons in top, left corner
      var buttons = document.createElement('div');
      buttons.style.position = 'absolute';
      buttons.style.overflow = 'visible';

      var bs = graph.getBorderSizes();
      buttons.style.top = container.offsetTop + bs.y + 'px';
      buttons.style.left = container.offsetLeft + bs.x + 'px';

      var left = 0;
      var bw = 16;
      var bh = 16;

      function addButton(label, funct) {
        var btn = document.createElement('div');
        mxUtils.write(btn, label);
        btn.style.position = 'absolute';
        btn.style.backgroundColor = 'transparent';
        btn.style.border = '1px solid gray';
        btn.style.textAlign = 'center';
        btn.style.fontSize = '10px';
        btn.style.cursor = 'hand';
        btn.style.width = bw + 'px';
        btn.style.height = bh + 'px';
        btn.style.left = left + 'px';
        btn.style.top = '0px';

        mxEvent.addListener(btn, 'click', function (evt) {
          funct();
          mxEvent.consume(evt);
        });

        left += bw;

        buttons.appendChild(btn);
      }

      addButton('+', function () {
        graph.zoomIn();
      });

      addButton('-', function () {
        graph.zoomOut();
      });

      if (container.nextSibling != null) {
        container.parentNode.insertBefore(buttons, container.nextSibling);
      } else {
        container.appendChild(buttons);
      }
    }
  }
}
</script>

<template>
  <p>
    Codec example for mxGraph. This example demonstrates dynamically creating a
    graph from XML and encoding the model into XML, as well as changing the
    default style for edges in-place.
  </p>
  <div class="mxgraph" style="position: relative; overflow: auto">
    &lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1"
    parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval
    1"&gt;&lt;mxGeometry x="380" y="0" width="140" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1"
    value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1"
    value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1"
    value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1"
    value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2"
    target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry
    as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8"
    edge="1" source="2" target="6" parent="1" value=""&gt;&lt;mxGeometry
    as="geometry" relative="1" y="-30"&gt;&lt;Array as="points"&gt;&lt;Object
    x="600"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9"
    edge="1" source="3" target="4" parent="1"
    value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="260"
    y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="10" edge="1" source="4" target="5" parent="1"
    value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="200"
    y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="11" edge="1" source="4" target="6" parent="1"
    value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
    y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
    y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
  </div>
  This graph is embedded in the page.
  <div
    class="mxgraph"
    style="
      position: relative;
      background: #eeeeee;
      border: 1px solid gray;
      overflow: auto;
      width: 400px;
      height: 200px;
    "
  >
    &lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1"
    parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval
    1"&gt;&lt;mxGeometry x="380" y="0" width="140" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1"
    value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1"
    value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1"
    value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1"
    value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2"
    target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry
    as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8"
    edge="1" source="2" target="6" parent="1" value=""&gt;&lt;mxGeometry
    as="geometry" relative="1" y="-30"&gt;&lt;Array as="points"&gt;&lt;Object
    x="600"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9"
    edge="1" source="3" target="4" parent="1"
    value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="260"
    y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="10" edge="1" source="4" target="5" parent="1"
    value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="200"
    y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="11" edge="1" source="4" target="6" parent="1"
    value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
    y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
    y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
  </div>
  This graph is embedded in the page.
  <div
    class="mxgraph"
    style="
      position: relative;
      background: #eeeeee;
      border: 6px solid gray;
      overflow: auto;
      width: 400px;
      height: 200px;
    "
  >
    &lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1"
    parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval
    1"&gt;&lt;mxGeometry x="380" y="20" width="140" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1"
    value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1"
    value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1"
    value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1"
    value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2"
    target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry
    as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8"
    edge="1" source="2" target="6" parent="1"
    value="Transfer2"&gt;&lt;mxGeometry as="geometry" relative="1"
    y="0"&gt;&lt;Array as="points"&gt;&lt;Object x="600"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9"
    edge="1" source="3" target="4" parent="1"
    value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="260"
    y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="10" edge="1" source="4" target="5" parent="1"
    value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="200"
    y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="11" edge="1" source="4" target="6" parent="1"
    value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
    y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
    y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
  </div>
  This graph is embedded in the page.
  <div
    class="mxgraph"
    style="position: relative; overflow: hidden; border: 6px solid gray"
  >
    &lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1"
    parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval
    1"&gt;&lt;mxGeometry x="380" y="20" width="140" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1"
    value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1"
    value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1"
    value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1"
    value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30"
    as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2"
    target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry
    as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8"
    edge="1" source="2" target="6" parent="1"
    value="Transfer2"&gt;&lt;mxGeometry as="geometry" relative="1"
    y="0"&gt;&lt;Array as="points"&gt;&lt;Object x="600"
    y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9"
    edge="1" source="3" target="4" parent="1"
    value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="260"
    y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="10" edge="1" source="4" target="5" parent="1"
    value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
    as="points"&gt;&lt;Object x="200"
    y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
    id="11" edge="1" source="4" target="6" parent="1"
    value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
    y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
    y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
  </div>
</template>

<style  lang="less">
</style>
